<template>
    <el-container>
        <!--<el-header>
            <div class="header_nav">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>项目管理</el-breadcrumb-item>
                    <el-breadcrumb-item>{{menu_3}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{menu_3_4}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </el-header>-->
        <el-container>
            <el-aside width="201px" style="border-right: 1px solid #eee">
                <el-row class="">
                    <el-col :span="24">
                        <el-menu
                                default-active="2"
                                class="menu_p"
                                @open="handleOpen"
                                :default-active="active_nav_pm" :router="true" @select="handleSelect"
                        >
                            <el-menu-item index="projectList">
                                <i class="el-icon-menu"></i>
                                <span slot="title">项目列表</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>


<script>
    function handleMenu(keyPath) {
        //console.log("新的路径集合："+keyPath_new);
        return keyPath.map((item) => {
            console.log("===" + item);
            switch (item) {
                case "projectList":
                    item = "项目列表";
                    break;
                case "apiTest":
                    item = "接口测试";
                    break;
                case "testPage_HTTP":
                    item = "HTTP";
                    break;
                case "testPage_TCP":
                    item = "TCP";
                    break;
                case "testPage_UDP":
                    item = "UDP";
                    break;
                case "testPage_MQTT":
                    item = "MQTT";
                    break;
                default:
                    break;
            }
            return item
        });
    }

    export default {
        name: "ProjectManage",
        data() {
            return {
                src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                active_nav_pm: 'projectList',
                menu_3: '项目列表',
                menu_3_4: ''
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                this.active_nav_pm = key;
                let keyPath_new = handleMenu(keyPath);
                this.menu_3 = keyPath_new[0];

                if (keyPath_new.length > 1) {
                    this.menu_3_4 = keyPath_new[1];
                }
                //console.log("选中回调：" + key, keyPath);
            },
            handleOpen(key, keyPath) {
                //console.log("打开回调"+key, keyPath);
            }
        }
    }
</script>

<style scoped>

</style>
